import Layout from "../../components/layout";
import "../../css/home.scss";
import LogoWall from "../../components/home/logoWall";
import utils from "../../utils";
let banner1 = require("../../assets/home-banner1.png");
let banner2 = require("../../assets/home-banner2.png");
let banner3 = require("../../assets/home-banner3.png");
let banner4 = require("../../assets/home-banner4.png");
let banner5 = require("../../assets/home-banner5.png");
let banner6 = require("../../assets/home-banner6.png");

let bannerTitle1 = require("../../assets/banner-title1.png");
let bannerTitle2 = require("../../assets/banner-title2.png");
let bannerTitle3 = require("../../assets/banner-title3.png");
let bannerTitle4 = require("../../assets/banner-title4.png");
let bannerTitle5 = require("../../assets/banner-title5.png");
let bannerTitle6 = require("../../assets/banner-title6.png");

let contentImg1 = require("../../assets/home-content1.png");
let icon1 = require("../../assets/home-icon1.png");
let icon2 = require("../../assets/home-icon2.png");
let icon3 = require("../../assets/home-icon3.png");
let icon4 = require("../../assets/home-icon4.png");
let icon5 = require("../../assets/home-icon5.png");
let icon6 = require("../../assets/home-icon6.png");
let icon7 = require("../../assets/home-icon7.png");
let icon8 = require("../../assets/home-icon8.png");
let icon9 = require("../../assets/home-icon9.png");
let icon10 = require("../../assets/home-icon10.png");
let icon11 = require("../../assets/home-icon11.png");




export default class Index extends React.PureComponent {
	constructor(props) {
		super(props);
		this.bannerList = [
			{ banner: banner1, bannerTitle: bannerTitle1, tips: "了解更多",type:"1", path: "/squareInfo/1" },
			{ banner: banner2, bannerTitle: bannerTitle2, tips: "了解更多", path: "/squareInfo/3" },
			{ banner: banner3, bannerTitle: bannerTitle3, tips: "即将开业", path: "/squareInfo/2" },
			{ banner: banner4, bannerTitle: bannerTitle4, tips: "即将开业", path: "/squareInfo/4" },
			// { banner: banner5, bannerTitle: bannerTitle5, tips: "即将开业", path: "/squareInfo/5" },
			// { banner: banner6, bannerTitle: bannerTitle6, tips: "即将开业", path: "/squareInfo/6" },
		];
		this.bannerTitleList = [
			{ banner: banner1, value: "空港国际店" },
			{ banner: banner2, value: "海纳时代店" },
			{ banner: banner3, value: "福泉中心店" },
			{ banner: banner4, value: "龙城国际店" },
			// { banner: banner5, value: "锦尚春天店" },
			// { banner: banner6, value: "一品CG店" },
		]
	}
	componentDidMount() {
		this.domEvent();
		this.initSwiper();
	}
	initSwiper(){
		var galleryThumbs = new Swiper('.gallery-thumbs', {
			spaceBetween: 2,
			slidesPerView: 4,
			// loop: true,
			freeMode: true,
			// loopedSlides: 5, //looped slides should be the same
			watchSlidesVisibility: true,
			watchSlidesProgress: true,
		});
		var galleryTop = new Swiper('.gallery-top', {
			spaceBetween: 10,
			speed: 400,
            autoplay: true,
			loop:true,
			// loopedSlides: 5, //looped slides should be the same
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			thumbs: {
				swiper: galleryThumbs,
			},
		});
	}
	appointment = (path)=>{ //预约
		this.props.history.push(path);
	}
	domEvent(){
		$(window).scroll(function(){
			let content1 = utils.getViewPort("content1");
			let content3 = utils.getViewPort("content3");
			let content4 = utils.getViewPort("content4");
			let logoWall = utils.getViewPort("logoWall");
			if(content1){
				$(".content1Img1").addClass("fadeInLeft");
				$(".content1text").addClass("fadeInRight");
			}
			if(content3){
				$(".content3Item").addClass("popIn");
				$(".content3Text").addClass("fadeIn");
			}
			if(content4){
				$(".content4Item").addClass("popIn");
				$(".content4Title").addClass("swoopInTop");
			}
			if(logoWall){
				$(".logo-wall-list").addClass("flipInY");
			}
		});
		// $(".principle").hover(function(){
		// 	$(this).find(".content4Item").removeClass("popIn").addClass("popIn")
		// 	console.log()
		// },function(){
		// 	$(this).find(".content4Item").removeClass("popIn")
		// })
	}
	componentWillUnmount(){
		$(window).unbind ('scroll');
	}
	render() {
		return (
			<Layout {...this.props}>
				<div className="swiper-container gallery-top">
					<div className="swiper-wrapper">
						{
							this.bannerList.map((item, index) => {
								return (
									<div
										className="swiper-slide"
										key={`banner-${index}`}>
										<div
											// style = {{background:`url(${item.banner})`,height:"74vh",width:"100vw"}}
											className={"banner-list"}>
											<img
												className={"banner-img"}
												src={item.banner} alt="" />
											<div className={"banner-title"}>
												<img className={"banner-title-img"} src={item.bannerTitle} alt="" />
												<button onClick = {this.appointment.bind(this,item.path)} className={"banner-title-btn"}>
													<span>{item.tips}</span>
													<span className={"banner-more"}></span>
													<span className={"banner-more"}></span>
												</button>
											</div>
										</div>

									</div>
								)
							})
						}
					</div>
					<div className="swiper-button-next swiper-button-white"></div>
					<div className="swiper-button-prev swiper-button-white"></div>
				</div>
				<div className="swiper-container gallery-thumbs">

					<div className="swiper-wrapper">
						{
							this.bannerTitleList.map((item, index) => {
								return (
									<div
										key={`banner-title-${index}`}
										style={{ background: `url(${item.banner})`, backgroundSize: "100% 100%" }}
										className="swiper-slide">
										<div className="banner-mask">
											<div className={"th-text-wrapper"}>
												{item.value}
											</div>
										</div>
									</div>
								)
							})
						}

					</div>
					<div className={"banner-bottom-line"}></div>


				</div>
				<div id = "content1" className={"home-content1"}>
					<img className = "vivify duration-1000 content1Img1" src={contentImg1} alt="" />
					<div className = {"home-content1-item vivify duration-1000 content1text"}>
						<div className = {"title"}>遇见缤纷课堂</div>
						<div className = {"sub-title"}>不期而遇的美好最是幸福</div>
						<div className={"icon-item"}>
							<img src={icon1} alt=""/>
							<div>
								<div className = {"icon-title"}>缤纷成长</div>
								<div className = {"icon-sub-title"}>艺术、文化、运动体能、素质拓展、科学素养、亲子早教、研学游学等教育品类全覆盖，让缤纷课堂成为现实。</div>
							</div>
						</div>
						<div className={"icon-item"}>
							<img src={icon2} alt=""/>
							<div>
								<div className = {"icon-title"}>陪伴成长</div>
								<div className = {"icon-sub-title"}>充满创造力与活力的空间，丰富多彩的互动活动，提供教育周边服务产品，更有专业的成人课堂，父母陪伴成长。</div>
							</div>
						</div>
						<div className={"icon-item"}>
							<img src={icon3} alt=""/>
							<div>
								<div className = {"icon-title"}>健康成长</div>
								<div className = {"icon-sub-title"}>符合国家办学场地规范，除了安全通道、消防保障等基础，采用国际E0级环保装修，人机工程设计，让空间更安全。</div>
							</div>
						</div>
					</div>
				</div>
				<div className={"home-content2"}>
					<div className = {"title1"}>全方位的经营支持</div>
					<div className = {"title2"}>你潜心教学，我专注运营</div>
				</div>
				<div id = "content3" className={"home-content3"}>
					<div className={"item "}>
						<img className = "vivify duration-1000 content3Item" src={icon9} alt=""/>
						<div style = {{marginBottom:20}}>
							<span className = {"title1 vivify duration-1000 content3Text"}>空间设备</span>
							<span className = {"title2 vivify duration-1000 content3Text"}>服务</span>
						</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>教学、经营、活动区域合理搭配，</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>多规格教室、多媒体设备灵活使用，</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>让课堂有更多可能。</div>
					</div>
					<div className={"item"}>
						<img  className = "vivify duration-1000 content3Item"  src={icon10} alt=""/>
						<div style = {{marginBottom:20}}>
							<span className = {"title1 vivify duration-1000 content3Text"}>市场运营</span>
							<span className = {"title2 vivify duration-1000 content3Text"}>服务</span>
						</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>单店20+团队支持服务，市场引流、</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>学员维护及后勤保障，都有专业的</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>服务支持。</div>
					</div>
					<div className={"item"}>
						<img  className = "vivify duration-1000 content3Item"  src={icon11} alt=""/>
						<div style = {{marginBottom:20}}>
							<span className = {"title1 vivify duration-1000 content3Text"}>互联网技术</span>
							<span className = {"title2 vivify duration-1000 content3Text"}>服务</span>
						</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>自主研发的豆壳APP、小程序及一站通的昂</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>思系统（集会员系统、营销系统、客户数据</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>管理系统、智能教务、财务ERP、智能人事</div>
						<div className = {"sub-title vivify duration-1000 content3Text"}>于一体），提升机构经营效率。</div>
					</div>
				</div>
				<div id = "content4" className={"home-content4"}>
					<div className={"home-content4-wrapper"}>
						<div className={"title vivify duration-1000 content4Title"}>豆壳的经营原则</div>
						<div className = {"row"}>
							<div className = "principle">
								<img className = "vivify duration-1000   content4Item" src={icon4} alt=""/>
								<div className = {"tips"}>不直接开发产品</div>
							</div>
							<div  className = "principle">
								<img className = "vivify duration-1000   content4Item"  src={icon5} alt=""/>
								<div className = {"tips"}>努力为用户选好产品</div>
							</div>
							<div  className = "principle">
								<img className = "vivify duration-1000   content4Item"  src={icon6} alt=""/>
								<div className = {"tips"}>选产品，不限于本地</div>
								<div className = {"tips"}>面向全国，面向全球</div>
							</div>
							<div  className = "principle">
								<img className = "vivify duration-1000  content4Item"  src={icon7} alt=""/>
								<div className = {"tips"}>努力帮助产品提供</div>
								<div className = {"tips"}>增值服务的能力</div>
							</div>
							<div  className = "principle">
								<img className = "vivify duration-1000  content4Item"  src={icon8} alt=""/>
								<div className = {"tips"}>通过产品的迭代</div>
								<div className = {"tips"}>推动平台的升级</div>
							</div>
						</div>
					</div>
				</div>
				<LogoWall/>
			</Layout>
		)
	}
}